<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/jstree/themes/default/style.css">
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../lib/vue/vue-util.js"></script>
    <script src="../lib/artTemplate/template-web.js"></script>
    <script src="../lib/jstree/jstree.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../lib/bootstrap-table/bootstrap-table.min.js"></script>

    <link rel="stylesheet" href="../lib/bootstrap-table/bootstrap-table.min.css">
<!--    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">-->
<!--    <link rel="stylesheet" href="../lib/font/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="../lib/css/style.css">
    <script src="../lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0 !important;
        }
        #content{
            width: 100%;
            height: 100%;
            padding: 0;
            overflow: hidden;
            padding-top: 8px;
        }
    </style>
</head>
<body>
<div id="content" style="flex-direction: row; display: flex; justify-content: flex-start ;width: 100%;height: 100%; overflow:hidden;">
    <div style="display: flex; flex-direction: column; ">
        <div id="jstree_demo" style="width: 250px; overflow: hidden; flex: 1">

        </div>
        <div style="text-align: center; padding-bottom: 10px;position: fixed;bottom: 20px; left: 80px;">
            <a class="btn btn-success btn-sm" href="javascript:;" id="export">导出</a>
            <a class="btn btn-primary btn-sm" href="javascript:;" id="import">导入</a>
        </div>

    </div>

    <!--<div class="batch-operation">
        <a type="button" class="btn btn-success handleAdd" href="javascript:;" tab-title="新增流程" >新增流程</a>
        <script>
            $(".handleAdd").attr("tab-href","/htmlsrc/bpm/workFlow/xml.html");
        </script>
    </div>-->
    <div style="flex: 1;margin-left: 10px; margin-right: 10px; overflow-y: auto;">
        <table id="dataList1"></table>
    </div>
<!--    <table id="dataList1" style="flex: 1;margin-left: 10px; margin-right: 10px; overflow-y: auto;">-->
<!--    </table>-->
</div>

</body>
</html>
<script id="toolbar" type="text/html">
    <div class="layui-toolbar">
        <a class="btn btn-warning btn-mini copy" href="javascript:;" data-id="{{d._id}}" style="padding: 1px 5px; font-size: 12px;line-height: 1.5;" >复制</a>
        <a class="btn btn-warning btn-mini edit" href="javascript:;" data-id="{{d._id}}" style="padding: 1px 5px; font-size: 12px;line-height: 1.5;" >修改</a>
        <a class="btn btn-danger btn-mini del" data-id="{{d._id}}" style="padding: 1px 5px; font-size: 12px;line-height: 1.5;">删除</a>
    </div>
</script>
<script>
    function reportMenu(node) {
        // access node as: node.id);
        // build your menu depending on node id
        return {
            createItem: {
                "label": "Create New Branch",
                "action": function(obj) {
                    this.create(obj);
                    alert(obj.text())
                },
                "_class": "class"
            },
            renameItem: {
                "label": "Rename Branch",
                "action": function(obj) { this.rename(obj); }
            },
            deleteItem: {
                "label": "Remove Branch",
                "action": function(obj) { this.remove(obj); }
            }
        };
    }


    var lastClickedNode = null;

    function onInfront() {
        loadFormList(lastClickedNode);
    }
    var tmpl = template.compile($('#toolbar').html())

    function loadFormList(n){
        if(!n){
            return
        }
        loadTimeout();
        var cols = [];
        $.get("/api/bpm/BpmXmlController/queryBPMXML", {pid: n=='top'?undefined:n.node.original._id}, function (data) {
            layer.closeAll();
            // $("#dataList").empty()

            /*cols.push({
                title: "工作流名称",
                field: "modelName",
            })

            cols.push({
                title: "创建时间",
                field: "createTime",
            })
            cols.push({
                title: "操作", formatter: function (value, row, index) {
                    return tmpl({
                        d: row
                    })
                }
            })*/
            $("#dataList1").bootstrapTable("destroy");
            $("#dataList1").bootstrapTable({
                columns: [
                    {
                        title: "工作流名称",
                        field: "modelName",
                    },
                    {
                        title: "创建时间",
                        field: "createTime",
                    },
                    {
                        title: "操作", formatter: function (value, row, index) {
                            return tmpl({
                                d: row
                            })
                        }
                    }
                ],
                pagination: false,
                sidePagination: "server",
                ajax: function (params) {
                    params.data.pid = n=='top'?undefined:n.node.original._id;

                    var url = "/api/bpm/BpmXmlController/queryBPMXML";
                    //换算分页
                    var data = params.data;
                    // data.size = data.limit;
                    // data.page = (data.offset / data.limit) + 1;
                    $.get(url + '?' + $.param(params.data)).then(function (res) {
                        if (!res.success) {
                            layer.msg("请求失败！")
                            return;
                        }
                        params.success({
                            rows: res.data || {},
                            // total: res.data.totalRow,
                        })
                    }, "json")
                }
            })
            /*laytableRender({
                data: data||[],
                page:false,
                cols: [
                    [
                        { field:'modelName', title:'工作流名称'},
                        { field:'createTime', title:'创建时间'},
                        {title:'操作', templet: "#toolbar"}
                    ]
                ],
                done: function(res, curr){
                    layCurrPage = curr;
                }
            });*/
        });

    }

    loadTimeout()
    $.get("/api/bpm/cat/all", {type:"1"},function (msg) {
        layer.closeAll();
        console.log(msg)
        $('#jstree_demo').jstree({
            "core" : {
                "animation" : 0,
                "check_callback" : true,
                "themes" : { "stripes" : true },
                'data' :[
                    {
                        'id' : 'top',
                        'text' : '全部分类',
                        'state' : { 'opened' : true, 'selected' : true },
                        'children' : (msg.data || {})
                    }
                ]
            },
            'contextmenu': {
                'select_node': false,
                'items': function (node) {
                    return {
                        createItem: {
                            "label": "添加分类",
                            "action": function(obj){
                                if(node.parents.length >= 2){
                                    layer.msg("最多只支持1级分类");
                                    return;
                                }
                                console.log(node)
                                var ins = $("#jstree_demo").jstree();
                                ins.show_contextmenu(node)
                                layer.load(0, {time: 5000});
                                $.get("/api/bpm/cat/add", {pid: node.original.id || node.original._id,type:"1"}, function (msg) {
                                    layer.closeAll()
                                    console.log(msg);
                                    if(msg && msg.data){
                                        ins.create_node(node, msg.data || {});
                                    }
                                    ins.open_node(node);
                                });
                            },
                            "_class": "class"
                        },
                        createForm:{
                            "label": "新增流程",
                            action: function () {
                                var ins = $("#jstree_demo").jstree();
                                ins.show_contextmenu(node)
                                addNavTab("bpm-xml-add", "新增流程", "/htmlsrc/bpm/workFlow/xml.html?pid=" + node.original._id)
                            }
                        },
                        renameItem: {
                            "label": "重命名",
                            "action": function(obj) {
                                if(node.id == 'top'){
                                    layer.msg("顶级分类无法编辑");
                                    return;
                                }
                                $("#jstree_demo").jstree().edit(node);
                            }
                        },
                        deleteItem: {
                            "label": "删除",
                            "action": function() {
                                if(node.id == 'top'){
                                    layer.msg("顶级分类无法删除");
                                    return;
                                }
                                loadTimeout()
                                $.get("/api/bpm/cat/delete", {id: node.original._id}, function (msg) {
                                    layer.closeAll();
                                    $("#jstree_demo").jstree().delete_node(node)
                                });

                                // if(node.children && node.children.length > 0){
                                //     layer.msg("无法删除一个非空分类");
                                //     return
                                // }
                                // console.log(node)
                                // $("#jstree_demo").jstree().delete_node(node)
                                // this.delete_node(node);
                            }
                        }
                    };
                }
            },
            "types" : {
            },
            "plugins" : [
                "contextmenu", "search",
                // "state",
                "types", "wholerow"
            ]
        });

        var ins = $('#jstree_demo').jstree();
        //选中第一个节点
        loadFormList('top')

        $("#jstree_demo").on("rename_node.jstree", function (e,n) {
            var name = n.text;
            loadTimeout()
            $.get("/api/bpm/cat/rename", {id: n.node.original._id, name: name}, function () {
                layer.closeAll();
            });
        }).on("select_node.jstree", function (e,n) {
            lastClickedNode = n;
            loadFormList(n)
        });
    });

    $(document).on("click", ".edit", function () {
        var id =  $(this).data("id");
        addNavTab(id, "修改", "/htmlsrc/bpm/workFlow/xml.html?flag=1&&id=" + id)
    });

    $(document).on("click", ".copy", function () {
        var id =  $(this).data("id");
        loadTimeout()
        $.get("/api/bpm/workflow/copyBpm", {id:id}, function () {
            layer.closeAll();
            onInfront()
        });
        // addNavTab(id, "修改", "/htmlsrc/bpm/workFlow/xml.html?flag=1&&id=" + id)
    });

    $(document).on("click", ".del", function () {
        var _id =  $(this).data("id");

        var index = layer.confirm("确定执行该操作?", {icon: 3, title:'操作提示'}, function () {
            layer.close(index);
            $.get(
                "/api/bpm/BpmXmlController/deleteBPMXML?_id="+_id,
                function(origin){
                    layer.closeAll();
                    layer.msg("删除成功");
                    onInfront();
                }
            )
        });

    })

    $("#export").click(function () {
        window.open("../com/export.html?type=workflow", "form-export", "left=100, top=100, width=500, height=400, location=no")
    });

    $("#import").click(function () {
        $("<input type='file'>").change(function (e) {
            // console.log(e.target.files)
            var file = e.target.files[0];
            var fd = new FormData();
            fd.append("file", file);
            fd.append("type", "workflow");
            $.ajax({
                url: "/api/bpm/form/load",
                type: "POST",
                dataType:"json",
                data: fd,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success: function (msg) {
                    if(!msg.success){
                        layer.alert("导入失败，请检查导入文件是否正确")
                        return
                    }
                    layer.alert("共导入分类" + msg.data.cat + "条，流程" + msg.data.workflow + "条", function () {
                        location.reload()
                    })
                }
            });
            // console.log(file)
        }).appendTo("body").hide().click();//.remove();
    });


</script>